<template>
  <header>
    <search :bgcColor="bgcColor" :iconColor="iconColor"></search>
  </header>
  <main>
    <div class="left">
      <van-sidebar v-model="active" id="classify-sidebar" @change="changeSidebar(active)">
        <van-sidebar-item :title="item.name" v-for="item in sidebarInfo" :key="item.id" />
      </van-sidebar>
    </div>
    <div class="right">
      <van-grid :column-num="3" id="classify-grid">
      <van-grid-item v-for="item in gridInfo" :key="item.id">
        <van-image :src="item.imageUrl" id="classify-img"/>
        <div>{{ item.title }}</div>
      </van-grid-item>
    </van-grid>
    </div>

  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import search from '@/components/search/index.vue'
import { getClassify,getGoodsByClassifyId } from '@/api/classify';

//搜索框背景色
const bgcColor = '#fff'
const iconColor = 'gray'

const active = ref(0)
let sidebarInfo = ref([])
let gridInfo = ref([])
//获取分类数据并渲染左边的导航栏
const renderSidebar = async() =>{
  const result = await getClassify()
  sidebarInfo.value = result.list
  sidebarInfo.value = sidebarInfo.value.slice(1)
}
renderSidebar()

//侧边栏导航切换时获取相应的商品
const changeSidebar = async(index: number) =>{
  const result = await getGoodsByClassifyId(sidebarInfo.value[index].id)
  gridInfo.value = result.categories
}
//每次进入时默认获取第一个分类的数据
const getNormalInfo = async() =>{
  const result = await getGoodsByClassifyId(2)
  gridInfo.value = result.categories
}
getNormalInfo()

</script>

<style lang="less" scoped>
main {
  display: flex;
  .left{
    width: 100px;
  }
  .right{
    flex-grow: 1;
    #classify-img{
      width: 100%;
      height: 80px;
    }
  }
}
</style>
